<!-- 这是，员工进行自己的加班请款管理的页面 -->

<template>
    <div>
        <el-table :data="overtimeTable" :default-sort="{prop: 'id', order: 'descending'}">
            <el-table-column label="ID" prop="id" width="40px"></el-table-column>
            <el-table-column label="类型" width="60px">
                <template v-slot:default="slotProps">
                    <template v-if="slotProps.row.type === '个人'">
                        <el-tag type="success">个人</el-tag>
                    </template>
                    <template v-else>
                        <el-tag type="danger">全局</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="发起人" prop="sponsor"></el-table-column>
            <el-table-column label="开始时间" prop="start_time" width="190px"></el-table-column>
            <el-table-column label="结束时间" prop="end_time" width="190px"></el-table-column>
            <el-table-column label="理由" prop="reason"></el-table-column>
            <el-table-column label="状态">
                <template v-slot:default="slotProps">
                    <template v-if="slotProps.row.status === '1'">
                        <el-tag type="info">等待批准</el-tag>
                    </template>
                    <template v-else-if="slotProps.row.status === '2'">
                        <el-tag type="success">已经批准</el-tag>
                    </template>
                    <template v-else-if="slotProps.row.status === '3'">
                        <el-tag type="danger">已经拒绝</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="详细信息">
                <template v-slot:default="slotProps">
                    <el-button size="small" type="primary" @click="getOvertimeDetail(slotProps.row.id, slotProps.row.type)">详细信息</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="详细信息" :visible="isShowDetail" :before-close="closeOvertimeDetailDialog">
            <template v-if="overtimeType === '全局'">
                <overtime-manager-apply isShowOvertimeManagerApply :overtimeId="overtimeId" :isShow="isShowDetail"
                    :fromManager="fromManager" v-on:closeOvertimeDetailDialog="closeOvertimeDetailDialog"></overtime-manager-apply>
            </template>
            <template v-else>
                <overtime-employee-apply :overtimeId="overtimeId" :isShow="isShowDetail" :fromManager="fromManager"
                    v-on:closeOvertimeDetailDialog="closeOvertimeDetailDialog"></overtime-employee-apply>
            </template>
        </el-dialog>

    </div>
</template>

<script>
    /**
     * @author Keven Ge
     * @code 41724180
     */
    import axios from "axios";
    import moment from "moment";

    import overtimeEmployeeApply from "./overtimeEmployeeApply.vue";
    import overtimeManagerApply from "./overtimeManagerApply.vue";

    export default {
        name: "overtimeEmployeeUser",
        props: {
            fromManager: {
                type: Boolean,
                default: false
            }
        },
        data: function() {
            return {
                overtimeTable: [{
                    id: "1",
                    start_time: null,
                    end_time: null,
                    reason: null,
                    status: null,
                }],
                overtimeId: "",
                overtimeType: "",
                isShowDetail: false,
            }
        },
        methods: {

            /**
             * @description  获取table的数据（个人）
             */
            getOvertimeTable: function() {
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/overtime/user/")
                    .then(function(response) {
                        console.log(response.data);
                        if (response.data.status === 0) {
                            _this.overtimeTable = response.data.data;
                        } else {
                            _this.$message.error("出现错误")
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description  获取table的数据（经理）
             */
            getOvertimeTableAll: function() {
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/overtime/approval/")
                    .then(function(response) {
                        console.log(response.data);
                        if (response.data.status === 0) {
                            _this.overtimeTable = response.data.data;
                        } else {
                            _this.$message.error("出现错误")
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 获取一个加班的详细信息
             */
            getOvertimeDetail: function(overtimeId, overtimeType) {
                console.log(this.overtimeId)
                this.overtimeId = overtimeId;
                this.overtimeType = overtimeType;
                this.isShowDetail = true;
            },

            /**
             * @description 关闭Dialog
             */
            closeOvertimeDetailDialog: function() {
                this.isShowDetail = false;
            },

        },
        mounted: function() {
            // console.log(this.fromManager);
            if (this.fromManager === true) {
                this.getOvertimeTableAll();
            } else {
                this.getOvertimeTable();
            }
        },
        components: {
            overtimeEmployeeApply,
            overtimeManagerApply
        }
    }
</script>

<style>
</style>
